<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:insert="common/common.html"></div>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        $(function(){
            $('#table').bootstrapTable({
                url: '/user/getInfo',
                method: 'post',                      //请求方式（*）
                toolbar: '#toolbar',              //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 4,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                uniqueId: "pid",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                detailView: true,                  //是否显示父子表
                columns: [{
                    checkbox: true,
                    visible: true                  //是否显示复选框
                },{
                    field: 'pid',
                    title: 'ID'
                }, {
                    field: 'pname',
                    title: '用户名称'
                }, {
                    field: 'pwd',
                    title: '密码'
                }, {
                    field:'pid',
                    title: '操作',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index){
                        var id = value;
                        var result = "";
                        result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                        result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
                        return result;
                    }
                },]
            })
            $("[aria-label='refresh']").attr("style","height:34px")
            $("[aria-label='toggle']").attr("style","height:34px")
        })
        //删除
        function DeleteByIds(pid){
            if(confirm("确认删除吗?")){
                $.ajax({
                    url : "/user/deleteUserInfo/" + pid,
                    type : "post",
                    dataType : "json",
                    success : function (result){
                        toastr.success("删除成功");
                        $("#table").bootstrapTable("refresh");
                    },
                    error : function (result){
                        alert("请联系管理员");
                    }
                })
            }
        }
        //修改
        function EditViewById(pid){
            BootstrapDialog.show({
                title: '修改',
                message: $('<div></div>').load("/user/toUpdate/" + pid),
                buttons: [{
                    label: '关闭',
                    action: function (dialog) {
                        dialog.close();
                    }
                }, {
                    label: '确定',
                    action: function (dialog) {
                        // 增加的逻辑
                        $.ajax({
                            url : "/user/updateInfo",
                            type : "post",
                            data : $("#updateUserForm").serialize(),
                            dataType : "json",
                            success : function (result){
                                toastr.success("修改成功");
                                dialog.close();
                                $("#table").bootstrapTable("refresh");
                            },
                            error : function (result){
                                alert("请联系管理员");
                            }
                        })
                    }
                }]
            });
        }
        //增加
        function insertInfo(){
            BootstrapDialog.show({
                title: '增加',
                message: $('<div></div>').load("/user/toAdd"),
                buttons: [{
                    label: '关闭',
                    action: function (dialog) {
                        dialog.close();
                    }
                }, {
                    label: '确定',
                    action: function (dialog) {
                        // 增加的逻辑
                        $.ajax({
                            url : "/user/addInfo",
                            type : "post",
                            data : $("#addUserForm").serialize(),
                            dataType : "json",
                            success : function (result){
                                toastr.success("增加成功");
                                $("#table").bootstrapTable("refresh");
                                dialog.close();
                            },
                            error : function (result){
                                alert("请联系管理员");
                            }
                        })
                    }
                }]
            });
        }
    </script>
</head>
<body>
<div id="toolbar">
    <button type="button" class="btn btn-danger" onclick="insertInfo()">增加</button>
</div>
<table id="table"></table>
</body>
</html>